<template>
  <div>
    <!-- 日历 -->
    <div class="calendar">
      <div class="w-[2rem] h-[19vh]">
        <div
          class="title"
          :class="{
            calendarActive: status === 1,
          }"
          @click="changeStatus(1)"
        >
          <span>日</span>
          <span>历</span>
        </div>
        <el-badge
          :is-dot="cutStatus == 1 && taskList?.length > 0"
          class="title"
          :offset="[0, 0]"
          :class="{
            calendarActive: status === 2,
          }"
        >
          <div
            @click="changeStatus(2)"
            class="w-full h-full flex flex-col justify-around items-center"
          >
            <span>待</span>
            <span>办</span>
          </div>
        </el-badge>
      </div>
      <div style="width: calc(100% - 2.5rem)">
        <el-calendar ref="calendar" v-if="status == 1" />
        <div style="height: 180px" class="overflow-y-auto" v-else>
          <el-card v-for="item in taskList" :key="item.id" class="mb-1">
            <template #header>
              <div class="w-full flex justify-between items-center">
                <span>{{ $initTime(item.remindTime * 1000) }}</span>

                <el-tag type="danger">
                  {{ item.title }}
                </el-tag>
              </div>
            </template>
            {{ item.content }}
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { handleApiResponse } from "@/utils/request.js";
import { GetTodoList } from "../../../../../wailsjs/go/api/HomeApi";

onMounted(() => {
  getTaskList();
});

const userStore = useUserStore();
const { cutStatus, flowActiveIndex, checkDetailForm } = storeToRefs(userStore);

const status = ref(1);
const changeStatus = (val) => {
  status.value = val;
};

const taskList = ref([]);
const getTaskList = () => {
  handleApiResponse(() => GetTodoList()).then((res) => {
    if (res.code == 0) {
      // console.log(res);
      taskList.value = res.data.todoTaskList || [];
    }
  });
};
</script>

<style scoped lang="scss">
.calendar {
  @apply w-full h-full flex  justify-between text-[0.7rem];

  .title {
    @apply w-full h-1/2 flex flex-col items-center justify-around bg-[#f6f6f6];
    &:hover {
      @apply bg-[#99ddcc] text-[white] cursor-pointer;
    }
  }
  .title:first-child {
    border-bottom: 0.1rem solid white;
  }
}

.calendarActive {
  color: white !important;
  background-color: var(--theme-color) !important;
}

:deep(.el-calendar__header) {
  display: none !important;
}

:deep(.el-calendar__body) {
  margin: 0;
  padding: 0;
}

:deep(.el-calendar-table .el-calendar-day) {
  width: 100%;
  height: 0.9rem !important;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 0.9rem;
}
</style>